<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" inline v-show="showSearch" label-width="68px">
      <el-form-item label="月份">
        <el-date-picker
          v-model="daterangeProductDate"
          type="monthrange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM-dd"
          style="width: 240px"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="productPowerReportList">
      <el-table-column label="月份" align="center" prop="productMonth" width="180" />
      <el-table-column label="生产总耗电量" align="center" prop="totalPowerConsume" />
      <el-table-column label="生产总用水量" align="center" prop="totalWaterConsume" />
      <el-table-column label="生产总节电量" align="center" prop="totalPrdPowerSave" />
      <el-table-column label="办公总用水量" align="center" prop="totalOfficeWaterConsume" />
      <el-table-column label="办公总耗电量" align="center" prop="totalOfficePowerConsume" />
      <el-table-column label="办公总节电量" align="center" prop="totalOfficePowerSave" />
      <el-table-column label="碳排放总量" align="center" prop="totalCarbonEmission" :formatter="carbonEmissionFormatter"/>
      <el-table-column label="减少碳排放总量" align="center" prop="totalCarbonSave" :formatter="totalCarbonSaveFormatter"/>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { productPowerReportByMonth, exportProductPowerReport } from '@/api/carbonReport/productPowerReport'

// 响应式状态
const loading = ref(true)
const total = ref(0)
const productPowerReportList = ref([])
const daterangeProductDate = ref([])
const showSearch = ref(true)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  params: {
    beginProductDate: null,
    endProductDate: null
  }
})

// 格式化方法
const carbonEmissionFormatter = (row) => row.totalCarbonEmission?.toFixed(2)
const totalCarbonSaveFormatter = (row) => row.totalCarbonSave?.toFixed(2)

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const response = await productPowerReportByMonth(queryParams)
    productPowerReportList.value = response.rows
    total.value = response.total
  } finally {
    loading.value = false
  }
}

// 查询处理
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  daterangeProductDate.value = []
  queryParams.params.beginProductDate = null
  queryParams.params.endProductDate = null
  handleQuery()
}

// 导出处理
const handleExport = async () => {
  try {
    await ElMessageBox.confirm('是否确认导出所有数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await exportProductPowerReport(queryParams)
    // 这里需要根据项目实际下载方式实现
    console.log('执行下载:', response.msg)
  } catch (error) {
    console.log('取消导出')
  }
}

// 初始化加载
onMounted(() => {
  getList()
})

// 监听日期范围变化
watch(daterangeProductDate, (newVal) => {
  if (newVal && newVal.length === 2) {
    queryParams.params.beginProductDate = newVal[0]
    queryParams.params.endProductDate = newVal[1]
  } else {
    queryParams.params.beginProductDate = null
    queryParams.params.endProductDate = null
  }
})
</script>
